<template>
	<ul class="list-content">
		<template v-if="messageStore.messageList.length > 0">
			<li
				class="list-item"
				:class="route.query.id === item._id ? 'active' : ''"
				v-for="(item, index) in messageStore.messageList"
				:key="index"
				@click="handleMessage(item, index)"
			>
				<div class="wrap">
					<div class="user-img">
						<img :src="proxy.$baseUrl + item.imgUrl" />
					</div>
					<div class="msg-info">
						<span class="msg-nick">{{ item.nick ? item.nick : item.groupName }}</span>
						<p class="msg-time">{{ utils.formatMessageDate((item.lastMsg as any).time) }}</p>
					</div>
					<!--          未读消息数量-->
					<div class="dots" v-show="item.unreadMsgCount">
						{{ item.unreadMsgCount > 99 ? '99+' : item.unreadMsgCount }}
					</div>
				</div>
			</li>
		</template>
		<template v-else>
			<div class="no-content">
				<img src="@/assets/images/no_message.png" alt="" />
			</div>
		</template>
	</ul>
</template>
<script setup lang="ts">
import utils from '../../utils'
import { IMessageList } from '@/api/message/type'
import { useMessageStore } from '@/store/modules/message'

const { proxy } = getCurrentInstance()
const messageStore = useMessageStore()
// 路由信息
const route = useRoute()
const router = useRouter()
const props = defineProps(['messageList'])

const messageList = ref<IMessageList[]>()

watch(
	() => props.messageList,
	(val: IMessageList[]) => {
		nextTick(() => {
			messageList.value = val
			messageStore.setMessageRead()
			if (messageStore.stagingInfo._id) {
				// 暂存信息中保存了该好友/群信息
				const currentIndex = messageList.value?.findIndex((item) => item._id === route.query.id)
				// 未该好友发过消息
				if (currentIndex == -1) {
					messageList.value?.unshift(messageStore.stagingInfo)
					// 清空暂存信息
					messageStore.clearStagingInfo()
				}
			}
		})
	}
)

// 当前选中的聊天下标
const listCurrentIndex = ref<number>(-1)

// 信息点击事件
const handleMessage = (item, index) => {
	console.log(123)
	const id = item._id
	if (id === route.query.id) return
	const type = item.type === 'friendChat' ? 'friend' : 'group'
	const name = item.type === 'friendChat' ? item.nick : item.groupName
	router.push({
		path: '/message',
		query: {
			id,
			type,
			name
		}
	})
	listCurrentIndex.value = index
}
</script>

<style scoped lang="scss">
.list-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.list-item {
		width: 100%;
		height: 80px;
		display: flex;
		//justify-content: space-between;
		justify-content: center;
		.wrap {
			width: 200px;
			height: 100%;
			display: flex;
			align-items: center;

			.user-img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				img {
					width: 40px;
					height: 40px;
				}
			}

			.msg-info {
				flex: 1;
				height: 40px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 10px;
				.msg-nick {
					max-width: 150px;
					font-size: 15px;
					color: var(--message-list-user-nick-color);
				}
				.msg-time {
					font-size: 13px;
					color: var(--message-list-time-color);
				}
			}

			.dots {
				height: 18px;
				background-color: #f56c6c;
				padding: 0 6px;
				overflow: hidden;
				font-size: 12px;
				border-radius: 10px;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.no-content {
	width: 100%;
	margin-top: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	img {
		width: 150px;
		height: 150px;
	}
}
</style>
